HTML <picture> tag Examples
Example: In this example we are using the <picture> tag with multiple <source> elements for responsive design, providing different image sources based on viewport width, and includes inline CSS for styling.
<!DOCTYPE html>
<html>
<body>
<picture>
<source media="(min-width: 700px)"
srcset=
"https://media.w3wiki.org/wp-content/uploads/20190825000042/geeks-221.png">
<source media="(min-width: 450px)"
srcset=
"https://media.w3wiki.org/wp-content/uploads/20190802021607/geeks14.png">
<img src="https://media.w3wiki.org/wp-content/uploads/20190808102629/geeks15.png"
alt="GFG"
style="width:auto;">
</picture>
</body>
</html>
Output:
HTML Tag
HTML <picture> tag provides web developers with flexibility in defining image resources, particularly useful for art direction in responsive designs. It comprises <source> tags for different media queries and a <img> tag as a fallback. Attribute values are set to load the most suitable image.
The <img> element is used for the last child element of the picture declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the element, or if none of the source tags matched.
The <picture> tag is similar to <video> and <audio>. We add different sources, and the first source that fits the preferences is the one that will be used.
Note: The <picture> tag in HTML supports both Global Attributes and Event Attributes, enhancing its functionality and interactivity.
Syntax:
<picture>
Image and source tag
<picture>